<script setup>
import { onMounted, ref, watch } from 'vue'
import { getPublishApi, deleteVehicleApi, commitAuditApi } from '@/api/vehicle'
import {
  publishVehicleApi,
  modifyPriceApi,
  offlineVehicleApi,
  rePublishVehicleApi
} from '@/api/publish'
import parseStatus from '@/utils/dictionary'
import parseTime from '@/utils/time'
import router from '@/router'

// 骨架屏加载动画
const loading = ref(true)
// 查询参数
const queryParams = ref({
  auditStatus: '',
  orderCode: '',
  publishStatus: ''
})

// 表格数据
const tableData = ref([])
const setTableData = async () => {
  const res = await getPublishApi(queryParams.value)
  tableData.value = res.data
  loading.value = false
}

// 删除车辆
const deleteVehicle = (id) => {
  // eslint-disable-next-line no-undef
  ElMessageBox.confirm('此操作不可逆，确认删除?', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    center: true
  }).then(async () => {
    await deleteVehicleApi(id)
    // eslint-disable-next-line no-undef
    ElMessage({
      type: 'success',
      message: '成功删除'
    })
    // 重载数据
    setTableData()
  })
}

// 提交审核
const commitAudit = async (id) => {
  await commitAuditApi(id)
  // eslint-disable-next-line no-undef
  ElMessage.success('提交成功')
  // 重载数据
  setTableData()
}

// 修改车辆
const updateVehicle = (row) => {
  // 审核通过后修改
  if (row.vehicleAudit.auditStatus === 20004) {
    // eslint-disable-next-line no-undef
    ElMessageBox.confirm('修改之后需重新提交审核，确认修改吗？', '警告', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
      center: true
    }).then(async () => {
      router.push(`/vehicle/add/${row.id}`)
    })
  } else {
    router.push(`/vehicle/add/${row.id}`)
  }
}

// 发布车辆
const publish = async (id) => {
  // eslint-disable-next-line no-undef
  ElMessageBox.confirm('发布后只能修改价格，确认发布吗？', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    center: true
  }).then(async () => {
    await publishVehicleApi(id)
    // eslint-disable-next-line no-undef
    ElMessage.success('发布成功')
    // 重载数据
    setTableData()
  })
}

// 发布之后修改价格
const price = ref(0)
const priceDialogShow = ref(false)
const priceModifyId = ref('')
// 点击修改价格
const modifyPrice = (row) => {
  priceDialogShow.value = true
  price.value = row.vehicleMarket.currentPrice
  priceModifyId.value = row.id
}
// 确认修改价格
const comfirmMP = async () => {
  await modifyPriceApi({ vid: priceModifyId.value, price: price.value })
  // eslint-disable-next-line no-undef
  ElMessage.success('修改成功')
  // 重载数据
  setTableData()
  priceDialogShow.value = false
}

// 下架车辆
const offline = async (id) => {
  // eslint-disable-next-line no-undef
  ElMessageBox.confirm('确认下架吗？', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    center: true
  }).then(async () => {
    await offlineVehicleApi(id)
    // eslint-disable-next-line no-undef
    ElMessage.success('下架成功')
    // 重载数据
    setTableData()
  })
}

// 重新发布
const rePublish = async (id) => {
  await rePublishVehicleApi(id)
  // eslint-disable-next-line no-undef
  ElMessage.success('发布成功')
  // 重载数据
  setTableData()
}
onMounted(() => setTableData())
watch(
  queryParams,
  () => {
    setTableData()
  },
  { deep: true }
)
</script>
<template>
  <div class="header-desc">
    <span>我的发布</span>
  </div>
  <div style="padding: 15px 20px 0">
    <span style="margin-right: 10px; font-size: 14px">审核状态 :</span>
    <el-select
      style="width: 130px"
      v-model="queryParams.auditStatus"
      placeholder="选择审核状态"
      clearable
    >
      <el-option :value="''" label="全部" />
      <el-option :value="20001" label="待审核" />
      <el-option :value="20002" label="审核中" />
      <el-option :value="20004" label="审核通过" />
      <el-option :value="20003" label="审核未通过" />
    </el-select>
    <span style="margin: 0 10px 0 20px; font-size: 14px">发布状态 :</span>
    <el-select
      style="width: 130px"
      v-model="queryParams.publishStatus"
      placeholder="选择发布状态"
      clearable
    >
      <el-option :value="''" label="全部" />
      <el-option :value="30001" label="未发布" />
      <el-option :value="30002" label="已发布" />
      <el-option :value="30003" label="已被订购" />
      <el-option :value="30004" label="已下架" />
    </el-select>
    <span style="margin: 0 10px 0 20px; font-size: 14px">排序规则 :</span>
    <el-select
      style="width: 130px"
      v-model="queryParams.orderCode"
      placeholder="选择排序规则"
      clearable
    >
      <el-option :value="1" label="提交时间" />
      <el-option :value="2" label="价格" />
    </el-select>
  </div>
  <div class="table">
    <div class="holder-container" v-if="tableData.length === 0">
      <el-skeleton v-if="loading" :rows="8" animated />
      <el-empty v-else description="暂无订单数据" />
    </div>
    <template v-else>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="产品" align="center">
          <template #default="scope">
            <car-item
              :disable="scope.row.vehicleAudit.publishStatus === 30001"
              size="mini-more"
              :car="scope.row"
            ></car-item>
          </template>
        </el-table-column>
        <el-table-column label="交易地址/学校" align="center">
          <template #default="scope">
            <span>{{
              scope.row.vehicleMarket.tradeAddr ||
              scope.row.campusOrShopDto.name
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="提交时间" width="163" align="center">
          <template #default="scope">
            <span>{{ parseTime(scope.row.vehicleAudit.commitTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格" width="100" align="center">
          <template #default="scope">
            <span>{{ scope.row.vehicleMarket.currentPrice }}</span>
            <div v-if="scope.row.vehicleAudit.publishStatus === 30002">
              <el-link type="primary" @click.prevent="modifyPrice(scope.row)"
                >修改</el-link
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <template v-if="scope.row.vehicleAudit.publishStatus !== 30001">
              <span>
                {{ parseStatus(300, scope.row.vehicleAudit.publishStatus) }}
              </span>
              <div
                v-if="scope.row.vehicleAudit.publishStatus === 30004"
                class="oprate"
                style="margin-left: 0"
              >
                <el-link type="success" @click="rePublish(scope.row.id)"
                  >重新发布</el-link
                >
              </div>
            </template>
            <template v-else>
              <span>
                {{ parseStatus(200, scope.row.vehicleAudit.auditStatus) }}
              </span>
              <div
                v-if="scope.row.vehicleAudit.auditStatus == 20001"
                class="oprate"
                style="margin-left: 0"
              >
                <el-link type="primary" @click="commitAudit(scope.row.id)"
                  >提交审核</el-link
                >
              </div>
              <div
                v-if="scope.row.vehicleAudit.auditStatus == 20003"
                class="oprate"
                style="margin-left: 0"
              >
                <span style="color: red">
                  {{ scope.row.vehicleAudit.auditAdvice }}
                </span>
                <el-tag type="warning" round> 请修改后重新提交 </el-tag>
              </div>
              <div
                v-if="scope.row.vehicleAudit.auditStatus == 20004"
                class="oprate"
                style="margin-left: 0"
              >
                <el-link type="success" @click="publish(scope.row.id)"
                  >发布</el-link
                >
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140" align="center">
          <template #default="scope">
            <template v-if="scope.row.vehicleAudit.publishStatus === 30001">
              <span class="oprate">
                <el-link
                  type="primary"
                  @click.prevent="
                    router.push(`/vehicle/browse/${scope.row.id}`)
                  "
                >
                  预览
                </el-link>
              </span>
              <span class="oprate">
                <el-link
                  type="primary"
                  @click.prevent="updateVehicle(scope.row)"
                >
                  修改
                </el-link>
              </span>
            </template>
            <template v-else>
              <span class="oprate">
                <el-link
                  type="success"
                  @click.prevent="router.push(`/details/${scope.row.id}`)"
                >
                  查看
                </el-link>
              </span>
              <span
                v-if="scope.row.vehicleAudit.publishStatus === 30002"
                class="oprate"
              >
                <el-link type="success" @click.prevent="offline(scope.row.id)"
                  >下架
                </el-link>
              </span>
            </template>
            <span
              v-if="
                scope.row.vehicleAudit.publishStatus === 30001 ||
                scope.row.vehicleAudit.publishStatus === 30004
              "
              class="oprate"
            >
              <el-link
                type="danger"
                @click.prevent="deleteVehicle(scope.row.id)"
                >删除
              </el-link>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!-- 修改价格对话框 -->
    <el-dialog v-model="priceDialogShow" align-center width="400">
      <template #header>
        <span style="font-size: 17px; font-weight: 700">修改价格</span>
      </template>
      <div style="text-align: center">
        <span style="color: red; font-size: 20px; margin-right: 10px">￥</span>
        <el-input-number
          size="large"
          v-model="price"
          controls-position="right"
          :step="1000"
        />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="comfirmMP"> 确定 </el-button>
          <el-button @click="priceDialogShow = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.header-desc {
  border-bottom: 1px solid #ddd;
  padding: 15px 20px;
  background-color: #fff;
}

.table {
  padding: 10px 30px;
  background-color: #fff;

  .oprate {
    text-align: center;
    padding: 5px 0;
    margin-left: 10px;
  }
}
</style>
